<template>
  <view class="balance-layout">
    <my-header title="我的虎元素"></my-header>
    <my-content class="content">
      <view class="balance_box">
        <view class="balance_header">
          <view class="balance_amount">
            <view class="amount">{{ balanceData.balance }}</view>
            <view class="recharge" @click="header(`/pages/user/recharge`)">充值</view>
          </view>
          <view class="balance_title">虎元素余额</view>
        </view>
        <!-- <view class="balance_log" @click="header(`/pages/user/balance_log`)">虎元素明细</view> -->
      </view>
      <view class="balance-log">
        <view class="balance-log-header">
          <view class="balance-log-title">虎元素明细</view>
          <view class="tab">
            <view
              class="tab_item"
              :class="[mode == item.id ? 'active' : '']"
              @click="changeTab(item.id)"
              v-for="item in tabData"
              :key="item.id"
            >
              <view class="tab_title">{{ item.title }}</view>
              <!-- <view class="tab_border"></view> -->
            </view>
          </view>
        </view>
        <scroll-view
          class="scroll"
          refresher-background=""
          :refresher-triggered="refreshStatus"
          @refresherrefresh="refresh"
          :refresher-enabled="true"
          scroll-y="true"
          @scrolltolower="lower"
        >
          <view class="balance_list" v-if="balanceDataList.length > 0">
            <view class="balance_item" v-for="item in balanceDataList" :key="item.id">
              <view class="top">
                <view class="remark">{{ item.remark }}</view>
                <view class="amount add" v-if="item.mode == 1">+{{ item.amount }}</view>
                <view class="amount remove" v-if="item.mode == 2">{{ item.amount }}</view>
              </view>
              <view class="bottom">
                <view class="time">{{ item.created_at }}</view>
                <view class="aftet_amount">余额：{{ item.after_amount }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      balanceData: {
        balance: 0,
      },
      mode: '',
      balanceDataList: [],
      tabData: [
        { id: '', title: '全部' },
        { id: 1, title: '收入' },
        { id: 2, title: '支出' },
      ],
      last_page: 0,
      page: 1,
      refreshStatus: false,
    }
  },
  onLoad() {},
  onShow() {
    this.getUser()
    this.refresh()
  },

  methods: {
    getUser() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.users
        .show()
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.balanceData = res.data
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    changeTab(id) {
      if (this.mode != id) {
        this.mode = id
        this.page = 1
        this.getBalance(2)
      }
    },
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getBalance(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getBalance(2)
    },
    getBalance(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.balanceLogs
        .index({ page: this.page, mode: this.mode })
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            if (type == 1) {
              this.balanceDataList = this.balanceDataList.concat(res.data.data)
            } else {
              this.balanceDataList = res.data.data
            }
            this.last_page = res.data.last_page
            this.refreshStatus = false
            if (this.last_page == this.page) {
              this.show('没有更多数据了')
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.balance-layout {
  height: 100vh;
  background-color: #141414;
}
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .balance_box {
    display: flex;
    flex-direction: column;
    margin: 0 30rpx 30rpx 30rpx;
    .balance_header {
      display: flex;
      flex-direction: column;
      border-radius: 10rpx;
      margin-top: 30rpx;
      background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-balange.png');
      background-size: 100% 100%;
      color: white;
      box-sizing: border-box;
      padding: 40rpx 60rpx;
      .balance_title {
        /* margin: 30rpx; */
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #808080;
      }
      .balance_amount {
        display: flex;
        align-items: center;
        /* margin: 0 30rpx 0 30rpx; */
        .amount {
          font-weight: bold;
          font-size: 36rpx;
        }
        .recharge {
          margin-left: 24rpx;
          width: 124rpx;
          text-align: center;
          font-size: 30rpx;
          font-family: 'youshe';
          height: 42rpx;
          line-height: 42rpx;
          background-image: url('https://www.dingxians.cn/upload/user_static/user/bg-rechrage.png');
          background-size: 100% 100%;
        }
      }
    }

    .balance_log {
      margin-top: 30rpx;
      border-radius: 10rpx;
      background: linear-gradient(to right, #b8f6e8, #3ee0d8);
      background: linear-gradient(to bottom, #d5c7fa, #e2ecf5);
      padding-left: 30rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-weight: bold;
    }
  }

  .balance-log {
    width: 710rpx;
    margin: 0 auto;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
		background-color: #1F1F1F;
		box-sizing: border-box;
		padding: 10rpx 32rpx 20rpx;

    .balance-log-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
			padding-bottom: 20rpx;

			.balance-log-title {
				color: white;
				font-size: 28rpx;
			}

      .tab {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 80rpx;
        font-size: 30rpx;

        z-index: 100;
        .tab_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
					width: 112rpx;
					height: 46rpx;
					
					margin-left: 12rpx;
					color: #808080;
					.tab_border {
            width: 50rpx;
            height: 5rpx;
          }
          &.active {
						background-image: url('https://www.dingxians.cn/images/box/tab-bg-active.png');
          background-size: 100% 100%;
            .tab_border {
              background-color: #a361f6;
            }
            .tab_title {
              font-weight: bold;
              color: #DED000;
            }
          }
        }
      }
    }

    .scroll {
      /* position: fixed;
    top: 100rpx;
    overflow-y: auto; */
      flex: 1;

      overflow: hidden;
      &::-webkit-scrollbar {
        display: none;
      }

      .balance_list {
        display: flex;
        flex-direction: column;
				color: white;
        .balance_item {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-size: 30rpx;
          /* width: 710rpx; */
          /* padding: 20rpx; */
          border-bottom: 1rpx solid #292929;
					padding: 20rpx 0;
          .top,
          .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .time {
              color: #808080;
              font-size: 24rpx;
            }
            .amount {
              font-size: 36rpx;
              display: flex;
              align-items: center;
              &.add {
                color: #a361f6;
              }
              &.remove {
                color: #DED000;
              }
            }
            .aftet_amount {
              color: #808080;
            }
          }
        }
      }
    }
  }
}
</style>
